<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX封装_默认参数</title>
</head>
<body>
    <h1>AJAX封装_默认参数</h1>
    <input type="button" value="获取响应数据" onclick="get_data()">
    <script>
        function ajax(options) {
            /**
             * options:
             *  type: 请求的方式
             *  url: 请求的地址
             *  data: 请求的参数，类型是JSON
             *  success: 请求成功以后，如何处理,函数
             *  error: 请求失败以后，如何处理,函数
            */
            let defaults ={
                type:'get',
                url:'',
                success:()=>{},
                error:()=>{}
            }
            // 将options的参数值覆盖到defaults里
            Object.assign(defaults, options)

            // 创建 AJAX 对象
            let xhr = new XMLHttpRequest()

            // 处理请求的参数
            let params = ''
            for (let key in defaults.data) {
                value = defaults.data[key]
                params = params + key + '=' + value + '&'
            }
            // 去掉最后一个&
            params = params.substr(0, params.length - 1)

            // get请求拼接参数（传递参数）
            if (defaults.type === 'get') {
                defaults.url = defaults.url + '?' + params
            }
            xhr.open(defaults.type, defaults.url)

            // post传递参数
            if (defaults.type === 'post') {
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                xhr.send(params)
            } else {
                xhr.send()
            }

            // 接收响应
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        defaults.success(xhr.responseText)
                    } else {
                        defaults.error(xhr.status);
                    }
                }
            }
        }

        function get_data(){
            ajax({
                // type:'get',
                url:'http://httpbin.org/get',
                success:(data)=>{
                    console.log(data)
                }
            })
        }
    </script>
</body>

</html>